<script lang="ts" setup>
import { defineComponent } from 'vue'
import { VumViewer, __VumViewer, VumGeoJsonDataSource } from 'vuesium'
import { Cartesian3 } from 'cesium'
import { viewerOptions, vecAnnoProvider } from './BaseMapPicker/BaseMapConfig'
import BaseMapPicker from './BaseMapPicker/BaseMapPicker.vue'
import Measure from './Measure.vue'
import GeoJsonLayer from './GeoJsonLayer/index.vue'
const baseUrl = import.meta.env.VITE_APP_BASE_URL

const viewLoad: __VumViewer.OnLoad = ({ viewer }) => {
  viewer.scene.camera.setView({
    destination: new Cartesian3(
      -2340092.6398154306,
      5142273.774771423,
      3316533.4732605307),
    orientation: {
      heading: 0.0, // east, default value is 0.0 (north)
      pitch: -1.5706128109633317, // default value (looking down)
      roll: 0,
    },
  })
  viewer.imageryLayers.addImageryProvider(vecAnnoProvider)
}


</script>
<template>
  <VumViewer style="position: relative; height: 95%; overflow: hidden;" @load="viewLoad"
    :default-options="viewerOptions">
    <BaseMapPicker></BaseMapPicker>
    <Measure></Measure>
    <GeoJsonLayer></GeoJsonLayer>
    <VumGeoJsonDataSource :model-value="baseUrl + '/data/wuhan.json'"></VumGeoJsonDataSource>
    <slot></slot>
  </VumViewer>
</template>
<style lang='scss' scoped>
.online-map {
  width: 100%;
  height: 100%;
}
</style>